import React,{useEffect} from 'react'
// 接收,useSelector会返回一个对象
import {useSelector,useDispatch} from 'react-redux'
import {addTask,subTask,fetchChannelsList} from '../../store/modules/AsyncCounter'


export default function Counter() {
    // state是整个仓库
    const {taskList,channels} =useSelector(state=>state.AsyncCounter)
    console.log(taskList);
    console.log(channels);
    const dispatch=useDispatch()

    useEffect(()=>{
        const action=fetchChannelsList()
        dispatch(action)
    },[dispatch])


    // const handleAddList=()=>{
    //     // 构建一个action
    //     const action=addTask()
    //     // 提交action给store
    //     dispatch(action)
    // }
    const handleSubList=()=>{
        const action=subTask()
        dispatch(action)
    }
  return (
    <div>
        <ul>
            {
                taskList.map((item,index)=>(
                    <li key={index}>{item}</li>
                ))
            }
        </ul>
        <button onClick={()=>dispatch(addTask('vue'))}>AddList</button>
        {/* <button onClick={handleAddList}>AddList</button> */}
        <button onClick={handleSubList}>SubList</button>
        <hr />
        <h3>请求数据后：</h3>
        <ul>
            {
                channels.map((item)=>(
                    <li key={item.id}>{item.name}</li>
                ))
            }
        </ul>
    </div>
  )
}
